<script lang="ts" setup>
import { computed } from 'vue'
import { useMainStore } from '@/store/main'

const store = useMainStore()
// 入参
const props = defineProps({
  // 旋转角度
  currentItem: {
    type: Object,
    default: () => ({}),
  },
})

const fileUrl = computed(() => {
  return `${window.IPCONFIG}/fpi/wjfw/download?wjbh=${props.currentItem.wjbh}`
})

enum Wjlx {
  'gd0020001' = 'audio',
  'gd0020002' = 'video',
  'gd0020003' = 'image',
}
const checkType = () => {
  return Wjlx[store.$state.nodeTreeData?.mllxdm as keyof typeof Wjlx]
}
</script>
<template>
  <div class="preview-box">
    <img style="height: 100%" v-if="checkType() === 'image'" :src="fileUrl" alt="" />
    <video
      style="width: 100%; height: 100%"
      v-else-if="checkType() === 'video'"
      :src="fileUrl"
      controls
      controlsList="nodownload"
    ></video>
    <audio
      style="width: 100%"
      v-else-if="checkType() === 'audio'"
      :src="fileUrl"
      controls
      controlsList="nodownload"
    ></audio>
  </div>
</template>
<style lang="scss" scoped>
.preview-box {
  width: 100%;
  height: 100%;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
}
.footer {
  padding-right: 20px;
  text-align: right;
}
</style>
